<template>
	<view class="container">
		<fu-navbar title="设备台账" bgColor="#0f68f0" color="#fff"></fu-navbar>

		<view class="tab-wrap">
			<view class="tab" v-for="item in tabList" :key="item.id"
				:class="{ 'tab-active': currentTab === item.currentTab }" @click="tabChange(item)">
				{{item.title}}
			</view>
			<view class="line"></view>
		</view>

		
		<view style="margin-top: 110rpx;"></view>
		<view v-if="currentTab === 0" class="equipment">
			<view class="mentTop">
				<view class="left">
					<image :src="read_url + details.equipmentImg"></image>
				</view>
				<view class="right">
					<view class="title margin-b-10" style="font-weight: 700;color: black;">{{details.emName}}</view>
					<view class="code fs-26 margin-b-10">{{details.emCode}}</view>
					<view class="code margin-b-10">安装地点：{{details.emLocation}}</view>
					<view class="code margin-b-10">设备状态：{{ getDictName('TYPE_EM_STATE', details.emState) }}</view>
				</view>
			</view>

			<view class="details">
				<view class="details_item" v-for="key in keyOrder" :key="key">

					<view class="left">{{keyMap[key]}}</view>
					<view class="right">
						<template v-if="key === 'emGrade'">
							{{ getDictName('TYPE_EM_GRADE', details[key]) }}
						</template>
						<template v-else-if="key === 'emType'">
							{{ getDictName('TYPE_EM_TYPE', details[key]) }}
						</template>
						<template v-else-if="key === 'deviceClassify'">
							{{ getDictName('DEVICE_CLASSIFY', details[key]) }}
						</template>
						<template v-else-if="key === 'isProvide'">
							{{ details.isProvide? '是': '否' }}
						</template>
						<template v-else-if="key === 'isScrap'">
							{{ details.isScrap? '是': '否' }}
						</template>
						<template v-else-if="key === 'isElectrical'">
							{{ details.isElectrical? '是': '否' }}
						</template>
						<template v-else>
							{{ details[key] || '-' }}
						</template>
					</view>
				</view>
			</view>
		</view>

		<view v-if="currentTab === 1" class="describeContent">
			<view class="content">
				<view v-if="!details.emDesc">暂无描述</view>
				<uParse v-else :content="details.emDesc" />
			</view>

		</view>

		<view v-if="currentTab === 2" class="maintenance">
			<view class="list">
				<view class="item bg-f padding-lr-24 margin-b-24" v-for="(item, index) in list" :key="index">
					<view class="flex align-center justify-between padding-tb-24 border-b-c9">
						<view class="fs-30">{{item.code}}</view>
					</view>
					<view class="padding-tb-24">
						<template v-for="(idm,idx) in item.taskNameList">
							<view class="fs-26 flex align-center justify-between margin-b-10" style="font-size: 30rpx;">
								<text>{{idm.taskName}}</text>
								<text v-if="idx === 0"
									style="color: #91B947;font-weight: 700;">{{ getDictName('TYPE_REP_STATE', item.state) }}</text>
							</view>
						</template>

						<view class="fs-26 con margin-b-10">安装位置：{{item.deviceLocationAndLocationName}}</view>
						<view class="fs-26 con margin-b-10">
							<template v-for="itemImg in item.picNewList">
								<image @click.stop="previewImage(itemImg.fileCode)" class="margin-r-12" :src="read_url+itemImg.fileCode"
									style="width: 100rpx;height: 100rpx;"></image>
							</template>
							<template v-for="(itemVideo,idxVideo) in item.videoNewList">
								<video :id="`myVideo${idxVideo}`" class="margin-r-12"
									style="width: 300rpx;height: 100rpx;"
									:src="read_url+itemVideo.fileCode" controls
									@click="playVideo(itemVideo,idxVideo)"
									@fullscreenchange="fullscreenchange($event, idxVideo)"
									@ended="videoEnd($event, idxVideo)"></video>
							</template>
						</view>
						<view class="fs-26 con margin-b-10">说明：{{item.remark}}</view>
						<view class="fs-26 flex align-center justify-between" style="color: rgba(127, 127, 127, 0.8);">
							<text>{{item.employeeName}}</text>
							<text>{{item.time}}</text>
						</view>
					</view>
				</view>
				<!-- 空数据显示 -->
				<fu-empty-ui emptyImage="collection" v-if="list.length == 0 && isInit"></fu-empty-ui>
			</view>
		</view>

		<view v-if="currentTab === 3" class="maintenanceRecord">
			<view class="list">
				<view class="item bg-f padding-lr-24 margin-b-24" v-for="(item, index) in list" :key="index">
					<view class="border-b-c9 padding-tb-24 ">
						<view class="flex align-center justify-between">
							<view class="fs-30">{{item.workOrderCode}}</view>
						</view>
						<view class="fs-26">{{item.repFaultTypeName}}</view>
					</view>

					<view class="padding-tb-24">
						<view class="fs-26 flex align-center justify-between margin-b-10" style="font-size: 30rpx;">
							<text>{{item.deviceLocationAndLocationName}}</text>
							<text
								style="color: #91B947;font-weight: 700;">{{ getDictName('TYPE_REP_STATE', item.repState) }}</text>
						</view>
						<view class="fs-26 con margin-b-10">{{item.faultReasonNameAndFaultTypeName}}</view>
						<view class="fs-26 con margin-b-10">
							<template v-for="itemImg in item.picList">
								<image @click.stop="previewImage(itemImg.fileCode)" class="margin-r-12" :src="read_url+itemImg.fileCode"
									style="width: 100rpx;height: 100rpx;"></image>
							</template>
							<template v-for="(itemVideo,idxVideo) in item.videoList">
								<video :id="`myVideo${idxVideo}`" class="margin-r-12"
									style="width: 300rpx;height: 100rpx;"
									:src="read_url+itemVideo.fileCode" controls
									@click="playVideo(itemVideo,idxVideo)"
									@fullscreenchange="fullscreenchange($event, idxVideo)"
									@ended="videoEnd($event, idxVideo)"></video>
							</template>
						</view>
						<view class="fs-26 con margin-b-10">{{item.repDesc}}</view>
						<view class="fs-26 flex align-center justify-between" style="color: rgba(127, 127, 127, 0.8);">
							<text>处理人:{{item.employeeName}}</text>
							<text>{{item.mtcEndTime}}</text>
						</view>
					</view>
				</view>
				<!-- 空数据显示 -->
				<fu-empty-ui emptyImage="collection" v-if="list.length == 0 && isInit"></fu-empty-ui>
			</view>
		</view>

		<view v-if="currentTab === 4" class="inspection">
			<view class="list">
				<view class="item bg-f padding-lr-24 margin-b-24" v-for="(item, index) in list" :key="index">
					<view class="flex align-center justify-between padding-tb-24 border-b-c9">
						<view class="fs-30">{{item.code}}</view>
						<view class="fs-28" style="color: #027DB4;"></view>
					</view>
					<view class="padding-tb-24">
						<view class="fs-26 flex align-center justify-between margin-b-10" style="font-size: 30rpx;">
							<text>{{item.deviceLocationAndLocationName}}</text>
							<text style="color: #91B947;font-weight: 700;">{{getDictName('PATROL_STATE',item.state)}}</text>
						</view>
						<view class="fs-26 con margin-b-10">
							<template v-for="itemImg in item.filePicCode">
								<image @click.stop="previewImage(itemImg.fileCode)" class="margin-r-12" :src="read_url+itemImg.fileCode"
									style="width: 100rpx;height: 100rpx;"></image>
							</template>
							<template v-for="(itemVideo,idxVideo) in item.fileVideoCode">
								<video :id="`myVideo${idxVideo}`" class="margin-r-12"
									style="width: 300rpx;height: 100rpx;"
									:src="read_url+itemVideo.fileCode" controls
									@click="playVideo(itemVideo,idxVideo)"
									@fullscreenchange="fullscreenchange($event, idxVideo)"
									@ended="videoEnd($event, idxVideo)"></video>
							</template>
						</view>
						<view class="fs-26 con margin-b-10">{{item.orderException}}</view>
						<view class="fs-26 flex align-center justify-between" style="color: rgba(127, 127, 127, 0.8);">
							<text>{{item.employeeName}}</text>
							<text>{{item.endTime}}</text>
						</view>
					</view>
				</view>
				<!-- 空数据显示 -->
				<fu-empty-ui emptyImage="collection" v-if="list.length == 0 && isInit"></fu-empty-ui>
			</view>
		</view>

	</view>
</template>

<script>
	import fuNavbar from '@/components/fu-navbar/fu-navbar.vue';
	import uParse from '@/components/u-parse/u-parse.vue'
	import {
		READ_FILE_URL
	} from '@/common/config.js';

	export default {
		components: {
			fuNavbar,
			uParse
		},
		onLoad(option) {
			this.optionId = option.id
			this.getSelectDictByDictTypeMap()
			this.getDetails()
		},
		onReachBottom() {
			switch (this.currentTab) {
				case 2:
					this.getEquipmentUpkeepList()
					break;
				case 3:
					this.getRepairAllByEqIdList()
					break;
				case 4:
					this.getEquipmentPatrolList()
					break;
				default:
					break;
			}
		},
		data() {
			return {
				optionId: 0,
				currentTab: 0,
				page: 1,
				status: 'more',
				current: 0,
				total: 0,
				isInit: false,
				read_url: READ_FILE_URL,
				dictTypeMap: {},
				list: [],
				videoContext: null,
				details: {},
				keyMap: {
					factoryCode: '出厂编号',
					emGrade: '设备级别',
					emType: '设备类型',
					emSpecification: '规格型号',
					mainParameter: '设备主要参数',
					manufacturer: '制造厂家',
					operationTime: '投运时间',
					purchaseTime: '购置时间',
					factoryTime: '出厂日期',
					unit: '单位',
					isProvide: '是否提供维保手册',
					isScrap: '是否报废',
					isElectrical: '是否有电气组件',
					deviceClassify: '设备分类',
					area: '所属区域-系统-子系统'
				},
				// 定义渲染顺序
				keyOrder: [
					'factoryCode',
					'emGrade',
					'emType',
					'emSpecification',
					'mainParameter',
					'manufacturer',
					'operationTime',
					'purchaseTime',
					'factoryTime',
					'unit',
					'isProvide',
					'isScrap',
					'isElectrical',
					'deviceClassify',
					'area'
				],
				tabList: [{
						title: '设备',
						currentTab: 0,
						id: 0
					},
					{
						title: '描述',
						currentTab: 1,
						id: 1
					},
					{
						title: '保养记录',
						currentTab: 2,
						id: 2
					},
					{
						title: '维修记录',
						currentTab: 3,
						id: 3
					},
					{
						title: '巡检记录',
						currentTab: 4,
						id: 4
					},
				]
			}
		},
		methods: {
			getDictName(dictType, value) {
				const dictItems = this.dictTypeMap[dictType];
				if (!dictItems) return "-";
				const item = dictItems.find((item) => item.dictValue === value);
				return item ? item.dictName : "-";
			},
			getSelectDictByDictTypeMap() {
				const dictTypeCode = "TYPE_EM_STATE,TYPE_EM_GRADE,TYPE_EM_TYPE,DEVICE_CLASSIFY,TYPE_REP_STATE,PATROL_STATE"
				this.$api.post(global.apiUrls.selectDictByDictTypeMap, {
					dictTypeCode
				}).then(({
					data
				}) => {
					this.dictTypeMap = data.info
				}).catch(error => {
					console.log(error)
				})
			},
			getDetails() {
				this.$api.post(global.apiUrls.selectEquipmentInfo, {
					id: this.optionId
				}).then(({
					data
				}) => {
					if (data.code === 9100) {
						const detils = data.info
						this.details = detils
					} else {
						uni.showToast({
							title: data.data.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.log(error)
				})
			},
			getEquipmentUpkeepList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				this.$api.post(global.apiUrls.selectEquipmentUpkeep, {
					id: this.optionId,
					pageNum: this.page,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 9100) {
						let total = res.data.info.total
						let data = res.data.info.rows
						if (this.page == 1) this.list = [];
						this.list = this.list.concat(data)
						if (this.list.length < total) {
							this.status = 'more';
							this.page++;
						} else {
							this.status = 'noMore';
						}
					}
					this.isInit = true;
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			getRepairAllByEqIdList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				this.$api.post(global.apiUrls.getRepairAllByEqId, {
					emId: this.optionId,
					pageNum: this.page,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 9100) {
						let total = res.data.info.total
						let data = res.data.info.rows
						if (this.page == 1) this.list = [];
						this.list = this.list.concat(data)
						if (this.list.length < total) {
							this.status = 'more';
							this.page++;
						} else {
							this.status = 'noMore';
						}
					}
					this.isInit = true;
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			getEquipmentPatrolList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				this.$api.post(global.apiUrls.selectEquipmentPatrol, {
					id: this.optionId,
					pageNum: this.page,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 9100) {
						let total = res.data.info.total
						let data = res.data.info.rows
						if (this.page == 1) this.list = [];
						this.list = this.list.concat(data)
						if (this.list.length < total) {
							this.status = 'more';
							this.page++;
						} else {
							this.status = 'noMore';
						}
					}
					this.isInit = true;
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			getSelectEquipmentData() {
				this.$api.post(global.apiUrls.selectEquipmentData, {
					id: this.optionId
				}).then(({
					data
				}) => {
					if (data.code === 9100) {
						const detils = data.info
						this.details = detils
					} else {
						uni.showToast({
							title: data.data.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.log(error)
				})
			},
			tabChange(item) {
				this.currentTab = item.currentTab
				this.page = 1
				this.list = []
				this.status = 'more'

				switch (item.currentTab) {
					case 0:
						this.getDetails()
						break;
					case 1:
						this.getSelectEquipmentData()
						break;
					case 2:
						this.getEquipmentUpkeepList()
						break;
					case 3:
						this.getRepairAllByEqIdList()
						break;
					case 4:
						this.getEquipmentPatrolList()
						break;

					default:
						break;
				}
			},
			playVideo(item, index) {
				const that = this;
				console.log("1111")
				this.videoContext = uni.createVideoContext(myVideo+index);
				console.log(this.videoContext)
				this.videoContext.requestFullScreen({
					direction: 0, // 设置方向为竖屏
					success: () => {
						console.log("Entered fullscreen successfully");
						that.videoContext.play();
					},
					fail: (err) => {
						console.error("Failed to enter fullscreen:", err);
					}
				});

			},
			fullscreenchange(e, i) {
				if (!e.detail || typeof e.detail.fullScreen !== "boolean") {
					console.warn("Invalid event detail:", e.detail);
					return;
				}
				// 退出全屏时
				if (!e.detail.fullScreen) {
					this.videoContext.pause();
				}
			},
			videoEnd(e, i) {
				// 检查 this.videoContext 是否有效
				if (!this.videoContext) {
					console.warn("videoContext is not initialized or has been destroyed.");
					return;
				}

				// 尝试退出全屏
				try {
					this.videoContext.exitFullScreen();
				} catch (err) {
					console.warn("Failed to exit fullscreen:", err);
				}
			},
			previewImage(imgUrl) {
				let url = this.read_url + imgUrl
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f3f5f8;
		min-height: 100vh;
		padding-bottom: 24rpx;
	}

	.tab-wrap {
		position: fixed;
		width: 100%;
		top:150rpx;
		background-color: #fff;
		height: 88rpx;
		display: flex;
		justify-content: space-around;
		z-index: 99;
		
		.line {
			border-top: 1px solid gray;
			margin: 10rpx 0;
		}

		.tab {
			// flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			position: relative;
			text-align: center;
			color: #5f5f5f;
		}

		.tab-active {
			color: #333;

			&::after {
				content: '';
				width: fix-conteng;
				height: 6rpx;
				background-color: red;
				border-radius: 5rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				z-index: 9;
			}
		}
	}

	

	.equipment {
		.mentTop {
			display: flex;
			background-color: #fff;
			padding: 20rpx;

			.left {
				width: 30%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				flex: 1;
				padding-left: 15rpx;
				color: gray;
			}
		}

		.details {
			background-color: #fff;
			padding: 20rpx;
			font-size: 26rpx;
			margin-top: 20rpx;

			.details_item {
				display: flex;
				margin: 15rpx 0;

				.left {
					width: 35%;
				}

				.right {
					flex: 1;
					color: gray;
				}
			}

		}
	}

	.describeContent {
		background: #fff;
		padding: 10rpx 0;

		.content {
			margin: 20rpx;
			padding: 5rpx;
			border: 1px solid gray;
		}
	}

	.maintenance {
		margin-top: 15rpx;

		.list {
			.item {
				border-radius: 20rpx;

				.con {
					color: rgba(51, 51, 51, 0.8);
				}
			}
		}

	}

	.maintenanceRecord {
		margin-top: 15rpx;

		.list {
			.item {
				border-radius: 20rpx;

				.con {
					color: rgba(51, 51, 51, 0.8);
				}
			}
		}
	}

	.inspection {
		margin-top: 15rpx;

		.list {
			.item {
				border-radius: 20rpx;

				.con {
					color: rgba(51, 51, 51, 0.8);
				}
			}
		}
	}
</style>